<template>
  <div class="m-dialog">
    <el-dialog
      v-bind="$attrs"
      ref="mDialog"
      :visible="$attrs.visible || instanceVisible"
      :width="computedDialogWidth"
      :show-close="false"
      v-on="$listeners"
    >
      <div slot="title" class="m-dialog--title">
        <span>{{ $attrs.title || '提示' }}</span>
        <span class="m-dialog--title__close" @click="closeBtnHideDialog">
          <m-iconfont
            classify="m-pc-public"
            color="#BDBDBD"
            icon="m-pc-public_guanbi"
          />
        </span>
      </div>
      <div class="content">
        <div v-if="instanceObj.type" class="content-base">
          <m-iconfont
            classify="m-pc-public"
            :color="chooseIconPath.color"
            :icon="chooseIconPath.name"
          />
          <span class="alert-message">{{ instanceObj.message }}</span>
        </div>
        <slot v-else name="content" />
      </div>
      <div v-if="footerVisible" slot="footer" class="m-dialog--footer">
        <div class="m-dialog--footer__center">
          <el-button
            refuse="true"
            :disabled="refuseDisabled"
            plain
            @click="refuse"
            >{{
              $attrs['refuse-text'] || instanceObj.refuseText || '取消'
            }}</el-button
          >
          <el-button
            type="primary"
            :loading="confirmLoading"
            :disabled="confirmDisabled"
            @click="confirm"
            >{{
              $attrs['confirm-text'] || instanceObj.confirmText || '确定'
            }}</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { throttle } from 'lodash';

const svgIconPoint = 18;
const defaultDialogSize = 388;
const midDialogSize = 600;
const typeMap = {
  success: { name: 'm-pc-public_tishicongrats', color: '#52C419' },
  info: { name: 'm-pc-public_tishimessage', color: '#ACC5FF' },
  warning: { name: 'm-pc-public_tishiwarning', color: '#FFBA00' },
  error: { name: 'm-pc-public_tishierror', color: '#FF0000' },
};
export default {
  name: 'MDialog',
  inheritAttrs: false,
  props: {
    footerVisible: {
      default: true,
      type: Boolean,
    },
    confirmLoading: {
      default: false,
      type: Boolean,
    },
    confirmDisabled: {
      default: false,
      type: Boolean,
    },
    refuseDisabled: {
      default: false,
      type: Boolean,
    },
  },
  data() {
    return {
      svgIconPoint,
      instanceVisible: false,
      instanceObj: {
        confirmText: '',
        refuseText: '',
        type: '',
        message: '',
        typeMap,
      },
    };
  },
  computed: {
    chooseIconPath() {
      return typeMap[this.instanceObj.type || 'info'];
    },
    computedDialogWidth() {
      if (this.$attrs.width === 'default') {
        return `${defaultDialogSize}px`;
      }
      if (this.$attrs.width === 'middle') {
        return `${midDialogSize}px`;
      }
      return this.$attrs.width || `${defaultDialogSize}px`;
    },
  },
  methods: {
    closeBtnHideDialog() {
      if (this.instanceObj.type) {
        this.instanceVisible = false;
        // document.body.removeChild(this.$el)
      } else {
        this.$emit('closeBtn');
        this.$emit('refuseEvent');
      }
    },
    refuse: throttle(
      function func() {
        if (this.instanceObj.type) {
          this.instanceVisible = false;
          // document.body.removeChild(this.$el)
        } else {
          this.$listeners.refuse();
        }
        this.$emit('refuseEvent');
      },
      1500,
      {
        leading: true,
        trailing: false,
      }
    ),
    confirm: throttle(
      function func() {
        if (this.instanceObj.type) {
          this.instanceVisible = false;
          // document.body.removeChild(this.$el)
        } else {
          this.$listeners.confirm();
        }
        this.$emit('confirmEvent');
      },
      1500,
      {
        leading: true,
        trailing: false,
      }
    ),
    showDialog(options) {
      this.instanceVisible = true;
      this.instanceObj.confirmText = options['confirm-text'];
      this.instanceObj.refuseText = options['refuse-text'];
      this.instanceObj.type = options.type;
      this.instanceObj.message = options.message;
    },
  },
};
</script>
<style lang="less">
// 最大宽度限制1200px
.el-dialog {
  max-width: 1200px;
}
.m-dialog {
  .el-dialog__header {
    padding: 0;
    .m-dialog--title {
      font-size: 18px;
      line-height: 24px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: @boldFontWeight;
      border-bottom: 1px solid @cutOffRuleColor;
      margin-bottom: 20px;
      .m-dialog--title__close:hover {
        cursor: pointer;
      }
    }
  }
  .el-dialog__body {
    padding: 0 40px 20px;
    .content {
      font-size: @commonFontSize;
      line-height: 20px;
      .content-base {
        display: flex;
        .alert-message {
          margin-left: 14px;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .m-dialog--footer {
      height: 78px;
      display: flex;
      justify-content: center;
      align-items: center;
      .m-dialog--footer__center {
        width: 200px;
        display: flex;
        justify-content: space-between;
        .el-button {
          width: 90px;
          height: 38px;
          & + .el-button {
            margin-left: 20px;
          }
        }
      }
    }
  }
}
</style>
